<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            height: 300px;
        }

        #box {
            width: 500px;
            height: 300px;
        }

        #box2 {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <div id="main"></div>
    <div id="box"></div>
    <div id="box2"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        let base = +new Date(2016, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let valueBase = Math.random() * 300;
        let valueBase2 = Math.random() * 50;
        let data = [];
        let data2 = [];
        for (var i = 1; i < 10; i++) {
            var now = new Date((base += oneDay));
            var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
            valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
            valueBase <= 0 && (valueBase = Math.random() * 300);
            data.push([dayStr, valueBase]);
            valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
            valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
            data2.push([dayStr, valueBase2]);
        }
        option = {
            title: {
                left: 'center',
                text: 'Tootip and dataZoom on Mobile Device'
            },
            legend: {
                top: 'bottom',
                data: ['Intention']
            },
            tooltip: {
                triggerOn: 'none',
                position: function (pt) {
                    return [pt[0], 130];
                }
            },
            toolbox: {
                left: 'center',
                itemSize: 25,
                top: 55,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {}
                }
            },
            xAxis: {
                type: 'time',
                axisPointer: {
                    value: '2016-10-7',
                    snap: true,
                    lineStyle: {
                        color: '#7581BD',
                        width: 2
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params.value);
                        },
                        backgroundColor: '#7581BD'
                    },
                    handle: {
                        show: true,
                        color: '#7581BD'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    formatter: '{value}\n'
                },
                z: 10
            },
            grid: {
                top: 110,
                left: 15,
                right: 15,
                height: 160
            },
            dataZoom: [
                {
                    type: 'inside',
                    throttle: 50
                }
            ],
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'average',
                    itemStyle: {
                        color: '#0770FF'
                    },
                    stack: 'a',
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(58,77,233,0.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(58,77,233,0.3)'
                            }
                        ])
                    },
                    data: data
                },
                {
                    name: 'Fake Data',
                    type: 'line',
                    smooth: true,
                    stack: 'a',
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'average',
                    itemStyle: {
                        color: '#F2597F'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(213,72,120,0.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(213,72,120,0.3)'
                            }
                        ])
                    },
                    data: data2
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
    <script>
        var chartDom = document.getElementById('box');
        var myChart = echarts.init(chartDom);
        var option;
        const data3 = [
            { name: '今日', value: 4260 },
            { name: '比昨日', value: 3970 },
            { name: '本周', value: 3454 },
            { name: '上周同期', value: 2390 },
        ]
        const colorList = [
            '#FFA600',
            '#FEDB65',
            '#026DB2',
            '#12FEE0',
            '#6DD400',
            '#44D7B6',
            '#5C64FF',
            '#6988F8',
            '#0E5FFF',
            '#2DE1FD',
            '#8221F1',
            '#B26DF6',
        ]
        // 声明
        var dataNum = 0;
        // 遍历
        for (var i in data3) {
            // 获取总数
            dataNum += data3[i].value;
        }

        option = {
            // 环形图中间默认显示文字
            title: {
                show: true,
                text: '总销售',
                itemGap: 10, //主副标题之间的距离
                x: '125px', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                y: '130px',
                subtext: dataNum,
                textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontSize: 12,
                    color: '#999999'
                },
                subtextStyle: {//副标题文本样式{"color": "#aaa"}
                    fontSize: 10,
                    fontWeight: "bold",
                    color: '#333333',
                    align: "center"

                },
            },
            tooltip: {
                backgroundColor: '#fff',
                extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
                backgroundColor: 'rgba(0,0,0,0.75)',
                // padding: [12, 16, 12, 16],
                textStyle: {
                    color: '#FFFFFF'
                },
                // 悬浮的位置可以调整，总距离左边10px
                position: (point) => {
                    // return ['100', point[1]]
                },
                formatter: (param) => {
                    let { name, value } = param
                    let result = `<div>${name}：${value}(个)</div>`
                    return result
                }
            },
            legend: {
                orient: 'vertial',
                itemWidth: 16,
                itemHeight: 16,
                icon: 'circle',
                right: 150,
                bottom: '40%',
                data: data3,
                textStyle: {
                    color: 'rgba(0,0,0,0.65)'
                },
                formatter: (name) => {
                    const value = data3.find(item => item.name === name).value
                    return `${name}：${value} 个`
                }
            },
            series: [{
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['30%', '50%'], // 图形位置
                label: { // 鼠标悬浮具体数据显示
                    show: false
                },
                data: data3,
                itemStyle: {
                    color: function (params) {
                        var index = params.dataIndex + params.dataIndex;
                        const colorStops = [{
                            offset: 1,
                            color: colorList[index]
                        }, {
                            offset: 0,
                            color: colorList[index + 1]
                        }];
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops)
                    },
                },
            }]
        };
        option && myChart.setOption(option);
    </script>
    <script>
        var chartDom = document.getElementById('box2');
        var myChart = echarts.init(chartDom);
        var option;

        const Data = ["11.07", "11.08", "11.09", "11.10", "11.11", "11.12", "11.13", ]
        const xzData = [200, 250, 370, 150, 350, 110, 110, 260, 100]
        const tclData = [150, 140, 300, 110, 260, 100, 150, 350, 110]
        const tbData = [80, 70, 80, 70, 80, 70, 80, 70, 90, 70]
        option = {
            //你的代码
            backgroundColor: '#fff',
            tooltip: {

                trigger: 'axis',
               
                borderWidth: 1,
            
                padding: 5,
                textStyle: {
                    color: '#000'
                }
            },
            legend: {
                itemWidth: 10,
                itemHeight: 10,
                top: 5,
                right: 30,
                icon: 'rect',
                textStyle: {
                    color: '#000'
                }
            },
            grid: {
                top: '14%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: Data,
                    axisLabel: {
                        // color: 'rgba(255, 255, 255, 0.8)',
                        fontSize: 14,
                        interval: 0,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#000',
                            type: "dotted",
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: "订单数",
                    min: 0,
                    position: 'left',
                    nameTextStyle: {
                        color: "#000",
                        fontSize: 14,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#000',
                            type: "dotted",
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: "#000",
                        }
                    },
                }
            ],
            series: [
                {
                    name: '比昨日',
                    type: 'bar',
                    barWidth: 10,
                    data: xzData,
                    barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                    barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                    itemStyle: {
                        barBorderRadius: 4,
                        barCategoryGap: '40%',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(54, 220, 255, 0.8)",
                            },
                            {
                                offset: 1,
                                color: "rgba(41, 104, 233, 0.1)",
                            },
                        ]),
                    }
                },
                {
                    name: '上周同期',
                    type: 'bar',
                    barWidth: 10,
                    barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                    barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                    itemStyle: {
                        barBorderRadius: 4,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(54, 255, 182, 0.8)",
                            },
                            {
                                offset: 1,
                                color: "rgba(6, 187, 61, 0.1)",
                            },
                        ]),
                    },
                    data: tclData
                },
                {
                    name: '上月同期',
                    type: 'bar',
                    barWidth: 10,
                    barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                    barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                    itemStyle: {
                        barBorderRadius: 4,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(234, 161, 84, 0.8)",
                            },
                            {
                                offset: 1,
                                color: "rgba(219, 162, 62, 0.1)",
                            },
                        ]),
                    },
                    data: tbData
                },
            ]
        };
        option && myChart.setOption(option);
    </script>
</body>

</html>